<script setup>
import { onMounted, ref, watch } from 'vue'
import { reqGetChallengeGiveOrder, reqChangeChallengeGiveOrderStatus, reqGetGiveOrderDetail } from '@/api/challenge/give.js'

const searchValue = ref('')
const page = ref(1)
const total = ref(0)
const loading = ref(false)
const refreshing = ref(false)
const giveList = ref([])
const showDetail = ref(false)
const giveDetail = ref({})
const prizeLoading = ref(false)
const dialogPage = ref(1)
const dialogLastPage = ref(0)

onMounted(() => {
  refreshing.value = true
  getGiveList()
})

watch(searchValue, (val) => {
  if (!val.trim()) {
    onRefresh()
  }
})

const getGiveList = async () => {
  try {
    const result = await reqGetChallengeGiveOrder({
      page: page.value,
      limit: 15,
      userId: searchValue.value
    })

    if (result.code === 200) {
      if (page.value === 1) {
        giveList.value = result.data.data
      } else {
        giveList.value.push(...result.data.data)
      }
      page.value++
      total.value = result.data.total
    }
  } finally {
    refreshing.value = false
    loading.value = false
  }
}
const onLoadMore = () => {
  getGiveList()
}
const onRefresh = () => {
  refreshing.value = true
  page.value = 1
  getGiveList()
}

const changeStatus = async (item) => {
  const result = reqChangeChallengeGiveOrderStatus(item.id)
  if (result.code === 200) {
    item.status = 1
  }
}

const onSearch = () => {
  page.value = 1
  getGiveList()
}

const showDetailDialog = (id) => {
  showDetail.value = true
  giveDetail.value = {}
  prizeLoading.value = true
  dialogPage.value = 1
  dialogLastPage.value = 0
  getGiveDetail(id)
}

const getGiveDetail = async (id) => {
  try {
    const result = await reqGetGiveOrderDetail(id, {
      page: dialogPage.value
    })
    console.log(result)
    if (result.code === 200) {
      giveDetail.value = result.data.data
      dialogPage.value++
    }
  } finally {
    prizeLoading.value = false
  }
}
</script>

<template>
  <div class="give-container">
    <van-search
      v-model="searchValue"
      show-action
      clearable
      placeholder="请输入用户id"
      @search="onSearch"
      clear-trigger="always"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="page * 10 >= total"
        finished-text="没有更多了"
        @load="onLoadMore"
      >
        <div class="give-item" v-for="item in giveList" :key="item.id">
          <div>
            <div>用户ID:{{ item.user_id }}</div>
            <div>赠送:{{ item.give_id }}</div>
          </div>
<!--          <span>ID:{{ item.id }}</span>-->
          <span>{{item.created_at}}</span>
          <van-switch
            v-if="item.status === 0"
            :model-value="item.status === 1"
            @change="changeStatus(item)"
          ></van-switch>
          <span v-else>已完成</span>
          <van-button size="small" @click="showDetailDialog(item.id)">详情</van-button>
        </div>
      </van-list>
      <van-back-top bottom="10vh" />
    </van-pull-refresh>

    <van-dialog
      title="提示"
      v-model:show="showDetail"
      show-cancel-button
      :show-confirm-button="false"
      cancel-button-text="关闭"
    >
      <van-list @load="getGiveDetail" style="max-height: 50vh; overflow: scroll;" v-model:loading="prizeLoading" :finished="dialogPage > dialogLastPage">
        <div class="prize-item" v-for="item in giveDetail" :key="item.id">
          <div>{{ item.prize_name }}</div>
          <div>￥{{ item.prize_price }} X{{ item.prize_num }}</div>
        </div>
      </van-list>
    </van-dialog>
  </div>
</template>

<style scoped lang="less">
.give-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;
  justify-content: space-between;
  font-size: 12px;
}

.prize-item {
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;
}
</style>
